<template>
  <div>
    <div class="vbestui-progress-page">
      <div class="item">
        <b-progress
          :percent.sync="percent8"
          :stroke-width="6"
          :track-color="['var(--warning)', 'var(--joker)']"
          show-thumb
          allow-click
          allow-drag
          is-active
          hover-show-thumb
        />
        <div class="percent">{{ percent8 }}%</div>
      </div>
    </div>
    <div class="vertical">
      <h3>垂直显示</h3>
      <div class="progress">
        <b-progress
          :percent.sync="percent"
          show-thumb
          hover-show-thumb
          vertical
          :track-color="['var(--warning)', 'var(--success)']"
          loadbar-color="var(--success)"
          loadbar-item-color="#fff"
          allow-drag
          allow-click
        />
      </div>
      <b-button type="success" @click="add" size="long">+</b-button>
      <b-button type="warning" @click="reduce" size="long">-</b-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProgressPage",
  data() {
    return {
      percent: 0,
      percent1: 40,
      percent8: 10,
    };
  },
  methods: {
    add() {
      this.percent += 5;
      if (this.percent >= 100) this.percent = 0;
    },
    reduce() {
      this.percent -= 5;
      if (this.percent <= 0) this.percent = 100;
    },
    add2() {
      this.percent += 1;
      if (this.percent >= 100) this.percent = 0;
    },
    reduce2() {
      this.percent -= 1;
      if (this.percent <= 0) this.percent = 100;
    },
    handleClick(percent) {
      //   console.log("click:" + percent);
    },
    handleDragBegin(percent) {
      //   console.log("dragbegin:" + percent);
    },
    handleDragGing(percent) {
      //   console.log("dragging:" + percent);
    },
    handleDragEnd(percent) {
      //   console.log("dragend" + percent);
    },
  },
};
</script>
<style scoped>
.vbestui-progress-page {
  border: 1px solid green;
  padding: 10px 0px;
}
.group {
  text-align: center;
  margin-top: 40px;
}
.group button {
  margin-right: 20px;
}
.vertical {
  width: 100px;
  border: 1px solid red;
  margin-left: 400px;
}
.progress {
  height: 500px;
  text-align: center;
}
.vertical button {
  margin-top: 15px;
}
</style>